<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>地址管理</title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" /
		
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background: #FFFFFF;
			width: 100%;
			height: 100%;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
		    -webkit-overflow-scrolling: touch;
		}
		.header-div {
			padding: 10px 0px;
		}
		.name {
			padding-top: 15px;
			margin-right: 20px;
			font-family: 'PingFangSC-Regular';
			font-size: 16px;
			color: #4C4C4C;
		}
		.adress {
			padding: 15px 0px;
			font-family: 'PingFangSC-Regular';
			font-size: 14px;
			color: #999999;
		}
		.adress-bg {
			background: #FFFFFF;
			padding: 0px 15px;
			border-bottom: 1px solid #F3F3F3;
		}
		.hide {
			display: none;
		}
		.account {
			float: right;
			display: inline-block;
		}
		input[type="radio"]{-webkit-appearance:none;outline: none;border-width: 0px;}
		input.check{background:url(../img/mine/unselect_icon.png) no-repeat center left;background-size:14px 14px;position:absolute;top:50%;left:0px;margin-top:-18px;width:35px;height:35px;}
		input.check:checked{background:url(../img/mine/select_icon.png) no-repeat center left;background-size:14px 14px;}
		/*input.goodsCheck:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}*/
		/*input.check:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}*/
		/*.checked{background:url(../img/goods/selected_icon.png) no-repeat left center;background-size:20px 20px;position:absolute;top:50%;left:15px;margin-top:-18px;width:35px;height:35px;}*/
		.radio-item label {
			margin-left: 20px;
			font-size: 13px;
			color: #4A4A4A;
			letter-spacing: 0.59px;
		}
		.radio-item {
			display: inline-block;
			position: relative;
		}
		#adressList {
			background: #FFFFFF;
			box-shadow: 0 2px 4px 0 rgba(201,201,201,0.50);
			margin-bottom: 20px;
		}
		.radio-container {
		    height: 50px;
    			line-height: 50px;
		}
		.menu-div {
			display: inline-block;
			height: 50px;
			width: 40px;
			text-align: center;
		}
		.menu-span {
			font-family: 'PingFangSC-Regular';
			font-size: 12px;
			color: #999999;
		}
		.empty-data-container {
			display: none;
			width: 100%;
			text-align: center;
		}
		.empty-img {
			width: 146px;
			height: 119px;
			margin-top: 60px;
		}
		.empty-data-container .tips {
			font-family: 'PingFangSC-Regular';
			font-size: 16px;
			color: #999999;
			margin-top: 25px;
		}
		.add-applicant-div {
			margin-top: 20px;
			text-align: center;
		}
		.add-btn {
			width: 200px;
			height: 45px;
			background-color: #5BA9F9;
			border-radius: 4px;
			font-family: 'PingFangSC-Medium';
			font-size: 18px;
			color: #FFFFFF;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">地址管理</h1>
		</header>
		<div class="mui-content">
			<div id="adressList"></div>
			<div class="empty-data-container">
				<img class="empty-img" src="../img/applicant/empty_bg.png" />
				<div class="tips">您还没有新的地址哦！快去新建一个吧！</div>
				<div class="add-applicant-div">
					<button class="add-btn">新建地址  ＋</button>
				</div>
			</div>
			<div class="transaction-container"><button type="button">新建地址  ＋</button></div>
		</div>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		$(function() {
			iosPageRefresh(); 
			var url = base.url.getAddressList;
			var data = {
				customerId: customerId
			}
			base.postData(url,data,getAddressListSuccess);
		})
		function getAddressListSuccess(data) {
			if (data.success) {
				var tempAddressList = data.extendData.addressList;
				var html = "";
				for (var index in tempAddressList) {
					html += getArrayListItem(tempAddressList[index],index);
				}
				$("#adressList").html(html);
				if (tempAddressList.length == 0) {
					$('.add-applicant-div').hide();
					$(".empty-data-container").show();
				}
			} else {
				mui.toast(data.message);
			}
		}
		function getArrayListItem (item,index) {
			var html = "";
			html += '<div class="adress-bg" data-index="' + index + '">'
			html += '	<div class="header-div">'
			html += '		<span class="addressId hide">'+item.addressId+'</span>'
			html += '		<span class="name">'+item.contactUser+'</span>'
			html += '		<span class="name">'+item.contactUserPhone+'</span>'
			html += '	</div>'
			html += '	<span class="adress">'+item.completeAddress+'</span>'
			html += '	<div class="radio-container">'
			html += '		<div class="radio-item">'
			if (item.def == 1) {
				html += '			<input type="radio" name="addr" class="check"  checked="checked" >'
			} else {
				html += '			<input type="radio" name="addr" class="check" >'
			}
			html += '			<label for="radioInput3">设为默认地址</label>'
			html += '		</div>'
			html += '		<div class="account">'
			html += '			<div class="menu-div edit"><span class="menu-span">编辑</span></div>'
			html += '			<div class="menu-div del"><span class="menu-span">删除</span></div>'
			html += '		</div>'
			html += '	</div>'
			html += '</div>'
			return html;
		}											
		$(".transaction-container").on("tap", "button", function() {
			window.location.href = "newAddress.html?addressId="+"&customerId="+customerId;
		})
		$("#adressList").on("tap", ".edit", function() {
			var addressId = $(this).closest(".adress-bg").find(".addressId").text();
			window.location.href = "newAddress.html?addressId="+addressId+"&customerId="+customerId;
		})
		$("#adressList").on("tap", ".del", function() {
			var addressId = $(this).closest(".adress-bg").find(".addressId").text();
			var url = base.url.delAddressInfo;
			var data = {
				customerId: customerId,
				addressId: addressId
			}
			base.postData(url,data, delAddressDataSuccess.bind(null, $(this)));
		})
		function delAddressDataSuccess(elementID, data) {
			if (data.success) {
				elementID.parent().parent().parent("div").remove();
				mui.toast(data.message);
			} else {
				mui.toast(data.message);
			}
		}
		$("#adressList").on("tap", ".radio-item", function() {
			var addressId = $(this).closest(".adress-bg").find(".addressId").text();
			var url = base.url.setDefaultAddress;
			var data = {
				customerId: customerId,
				addressId: addressId
			}
			base.postData(url,data,function(data) {
				mui.toast(data.message);
				setTimeout(function() {
					mui.back();
				}, 1000)
			});
		})
		function iosPageRefresh () { //ios页面返回当前页时强制刷新
			var isPageHide = false;   
			window.addEventListener('pageshow', function () {      
			    if (isPageHide) {        
			      window.location.reload();      
			    }    
			});    
			window.addEventListener('pagehide', function () {
			    isPageHide = true;    
			});
		}
	</script>
	</body>
</html>
